import React, { useState } from "react";
import { Button } from "antd-mobile";
import { LocationFill } from "antd-mobile-icons";
import axios from "axios";
import { useNavigate } from "react-router-dom";
function Place() {
    const navigate = useNavigate()
  const [place, setPlace] = useState("");
  const toplace = () => {
    axios
      .post("/gaode/v3/ip?key=401e84b9917b047d7c0ede75178711b5")
      .then((rse) => {
        setPlace(rse.data.city);
      });
  };
  setTimeout(() => {
        navigate('/home/'+ place)
      }, 3000);
  return (
    <div>
      <h2>选择你的位置</h2>
      <p>我们会根据你选择的位置，推荐当地热门的展馆活动</p>
      <div style={{ height: "15vh", lineHeight: "15vh" }}>
        <LocationFill />
        {place}
      </div>
      <Button style={{ width: "98%", borderRadius: "10px" }} onClick={toplace}>
        使用我当前的位置
      </Button>

      <div
        style={{
          padding: "10px",
          boxSizing: "border-box",
        }}
      >
        <div
          style={{
            width: "100%",
            height: "15vh",
            lineHeight: "10vh",
            border: "1px solid #ccc",
            borderRadius: "10px",
          }}
        >
          <h4>杭州市</h4>
        </div>
        <div
          style={{
            width: "100%",
            height: "15vh",
            lineHeight: "10vh",
            border: "1px solid #ccc",
            borderRadius: "10px",
            marginTop:'10px'
          }}
        >
          <h4>上海市</h4>
        </div>
        <div
          style={{
            width: "100%",
            height: "15vh",
            lineHeight: "10vh",
            border: "1px solid #ccc",
            borderRadius: "10px",
            marginTop:'10px'
          }}
        >
          <h4>北京市</h4>
        </div>
      </div>
    </div>
  );
}

export default Place;
